<template>
  <div class="customer-list">
    <el-card>
      <!--查询区-->
      <el-form :model="queryInfo" inline size="mini">
        <el-form-item label="用户名">
          <el-input v-model="queryInfo.contactName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="queryInfo.address" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryInfo.type" clearable>
            <el-option label="普通用户" value="0"></el-option>
            <el-option label="vip用户" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="customerList" v-loading="loading" style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="用户名" width="100px" prop="contactName">
        </el-table-column>
        <el-table-column label="电话" width="120px" prop="phone">
        </el-table-column>
        <el-table-column label="状态" width="100px" prop="type">
          <template slot-scope="scope">
            <span>
              <el-tag
                size="small"
                type="dark"
                color="#2ecc71"
                v-if="scope.row.type === '普通用户'"
                >普通用户</el-tag
              >
              <el-tag size="small" type="dark" v-else>vip会员</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="地址"
          prop="address"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="余额" width="100px" prop="balance" sortable>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="vip过期时间" prop="vipExpiration">
          <template slot-scope="scope">
            <span>{{ scope.row.vipExpiration | formatTime }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="getCustomerList"
        @current-change="getCustomerList"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-count="pages"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getCustomerListApi } from "api/customer";
export default {
  name: "List",
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 注册时间排序
        sortColumn: "createTime",
        // 升序
        isAse: true,
        // 用户名
        contactName: "",
        // 地址
        address: "",
        // 状态
        type: "",
      },
      loading: false,
      total: 0,
      pages: 1,
      customerList: [],
    };
  },
  created() {
    this.getCustomerList();
  },
  methods: {
    async getCustomerList() {
      try {
        this.loading = true;
        const { data, code } = await getCustomerListApi(this.queryInfo);
        console.log(data);
        if (code !== 300) return;
        this.customerList = data.customerList;
        this.total = data.total;
        // mock 测试 最后去除
        this.pages = data.pages;
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {},
    handleReset() {},
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin: 18px 0px;
  float: right;
}
</style>